<template>
    <div class="order-container">
    <el-table
      :data="tableData"
      style="width: 100%" header-cell-style="background-color:#D7FFF0;color:black">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称" >
              <span>{{ props.row.goodname }}</span>
            </el-form-item>
            <el-form-item label="支付方式">
              <span>{{ props.row.paytype }}</span>
            </el-form-item>
            <el-form-item label="商品 ID" >
              <span>{{ props.row.goodId }}</span>
            </el-form-item>
            <el-form-item label="商品价格" >
              <span>{{ props.row.goodprice }}</span>
            </el-form-item>
            <el-form-item label="商品分类" >
              <span>{{ props.row.goodcategory }}</span>
            </el-form-item>
  
            <el-form-item label="订单创建时间" >
              <span>{{ formatDate(props.row.createtime) }}</span>
            </el-form-item>
            
            <el-form-item label="商品描述" >
              <span>{{ props.row.gooddescription }}</span>
            </el-form-item>
            <el-form-item  label="是否购买" >
                <span>{{props.row.shopstatic==1?"已购买":"未支付"}}</span>
            </el-form-item>
            <el-form-item label="操作">
              <!-- <el-button type="danger" size="mini" @click="Deleteorder(props.row.id)">删除</el-button> -->
  
  
  
  
              <el-popconfirm
                      confirm-button-text="好的"
                      cancel-button-text="不用了"
                      icon="el-icon-info"
                      icon-color="red"
                      title="你确定移除该订单吗？"
                      @confirm="Deleteorder(props.row.id)"
                    >
                      <el-button slot="reference" type="danger" size="medium" style="margin-top: 20px;">移除订单</el-button>
                    </el-popconfirm>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="goodId" calss="column-header">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goodname" calss="column-header">
      </el-table-column>
      <el-table-column
        label="商品分类"
        prop="goodcategory" calss="column-header">
      </el-table-column>
    </el-table>
  </div>
  </template>
  
  
  
  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    .el-form--inline .el-form-item__label {
     font-size: 14px;
     font-weight: bold;
     color: #000000;
  }
  .order-container .el-table__body td {
    background-color: #DDF3FF;
  }
  
  
  </style>
  
  
  
  
  
  
  
  
  <!--   <script>
      export default {
        data() {
          return {
            activeNames: ['1']
          };
        },
        methods: {
          handleChange(val) {
            console.log(val);
          }
        }
      }
    </script> -->
  
  
  
  
  
  
  
  
  
    <script>
  import request from '@/request/request.js';
    
    export default {
      data() {
        return {
          user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
          tableData: []
        }
      },
    methods:{
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
      getOrder(id){
    request.get("/order/user/"+id).then((res) => {
      if (res.code === "0") {
        this.tableData = res.data;
        console.log(this.tableData);
      }
    });
  },
  Deleteorder(id){
    request.delete("/order/"+id).then((res) => {
      if (res.code === "0") {
        this.getOrder(this.user.id);
      }
    });
  
  },
    },
    created() {
      this.getOrder(this.user.id);
    },
    }
  </script>